iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Modern Web

tailwindcss - 從零開始學系列 第 8

tailwindcss - 從零開始學 - Day8 - 卡片排版

  • 分享至 

  • xImage
  •  

接下來這個單元來製作一個簡單的卡片排版:

先宣告一些基本的排版:

<a href="/">
    <div class="">
      <div>
        <p class="">My Title</p>
        <p class="">Description</p>
      </div>
    </div>
  </a>

會呈現這個樣子:

https://ithelp.ithome.com.tw/upload/images/20230914/20162607sCDHJVxPgQ.png

然後加入跟文字屬性與留白屬性:

 <a href="/">
    <div class="">
      <div>
        <p class="text-2xl font-bold">My Title</p>
        <p class="mt-4 text-lg font-medium">Description</p>
      </div>
    </div>
  </a>

會呈現這個樣子:

https://ithelp.ithome.com.tw/upload/images/20230914/20162607X0cCXlucAx.png

加入外框屬性:

  • rounded-3xl:圓角
  • border-4:框線粗細
  • border-black:框線顏色
<a href="/">
    <div class="h-44 rounded-3xl border-4 border-black bg-white p-5 ">
      <div>
        <p class="text-2xl font-bold">My Title</p>
        <p class="mt-4 text-lg font-medium">Description</p>
      </div>
    </div>
  </a>

會呈現這個樣子:

https://ithelp.ithome.com.tw/upload/images/20230914/20162607SI334m6FYo.png

加入置中屬性,items-center 是垂直置中,要讓它產生作用,要跟 flex 一起宣告:

<a href="/">
    <div class="h-44 rounded-3xl border-4 border-black bg-white p-5 flex items-center">
      <div>
        <p class="text-2xl font-bold">My Title</p>
        <p class="mt-4 text-lg font-medium">Description</p>
      </div>
    </div>
  </a>

會呈現這個樣子:

https://ithelp.ithome.com.tw/upload/images/20230914/201626079987TnmhOs.png

最後加入當滑鼠移動到卡片上方時,會自動變背景顏色,要達到這個目的,必須要使用 hover:,表示滑鼠移動事件,後面可以加上任何屬性,在這裡的範例是加入背景顏色為黃色 hover:bg-yellow-200:

<a href="/">
    <div class="h-44 rounded-3xl border-4 border-black bg-white p-5 flex items-center hover:bg-yellow-200">
      <div>
        <p class="text-2xl font-bold">My Title</p>
        <p class="mt-4 text-lg font-medium">Description</p>
      </div>
    </div>
  </a>

最後的結果會呈現這個樣子:

https://ithelp.ithome.com.tw/upload/images/20230914/20162607EVYmoB6ng4.png

今日完整範例

tailwindcss - 從零開始學 - Day8 [完]


上一篇
tailwindcss - 從零開始學 - Day7 - 橫幅排版
下一篇
tailwindcss - 從零開始學 - Day9 - 卡片排版組合
系列文
tailwindcss - 從零開始學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言